<template>
	<!-- 根节点 -->
	<view class="page">
		<fu-custom :isBack="true" :isBottom="true" bgColor="bg-white">
			<block slot="content"><text class="text-333 text-xl">批量管理</text></block>
		</fu-custom>
		<!-- 商品列表 start -->
		<view class="fu-goods">
			<block v-for="item in listDataReverse" :key="item.id">
				<view class="fu-goods-box margin-bottom-sm padding-bottom-sm" @click.stop="selectGoods(item)">
					<view class="select">
						<image v-if="item.selected" src="../../../user/static/checked.png" mode="aspectFill" />
						<image v-else src="../../../user/static/unchecked.png" mode="aspectFill" />
					</view>
					<view class="fu-goods-pic">
						<view class="fu-pic">
							<fu-image :src="item.thumb" mode="aspectFill" />
						</view>
					</view>
					<view class="fu-goods-name">
						<text class="text-cut-2 text-df">{{ item.name }}</text>
					</view>
					<view class="fu-goods-action flex justify-between align-center">
						<view class="text-sm fu-goods-price text-price">
							<text class="text-df text-bold">{{ item.shop_price }}</text>
						</view>
					</view>
					<view class="fu-goods-action flex justify-between align-center">
						<view class="text-sm text-price text-999 text-through">
							<text class="text-df">{{ item.shop_price }}</text>
						</view>
						<view class="text-999">销量{{ item.sales_num_new }}</view>
					</view>
				</view>
			</block>
		</view>
		<view class="batch-view flex justify-end align-center" v-show="(requestType == 1 || requestType == 0)&&listDataReverse.length>0">
			<view class="margin-left all flex flex-sub align-center" @click="selectAll">
				<image v-if="isAll" src="../../../user/static/checked.png" mode="aspectFill" />
				<image v-else src="../../../user/static/unchecked.png" mode="aspectFill" />
				<text class="margin-left-sm">全选</text>
			</view>
			<view class="bt" @click="delGoods">
				删除
			</view>
			<view class="bt active" v-if="requestType == 1" @click="changeState('unSale')">
				下架
			</view>
			<view class="bt active" v-if="requestType == 0" @click="changeState('sale')">
				上架
			</view>
		</view>
		<!-- 商品列表 end -->
		<fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
			:listDataLength="listDataLength" :isLoadInit="isLoadInit" :emptyImage="imageType"></fu-empty>
	</view>
</template>

<script>
	/**
	 * @author 刘畅
	 */
	import paging_list from '@/common/mixin/paging_list.js';
	import {
		navigateToLogin
	} from '@/common/utils/utils.js';
	export default {
		mixins: [paging_list],
		data() {
			return {
				requestType: -1,
				minixPagingListsApi: global.apiUrls.getGoodsList, //混入获取列表接口名
				allowOnloadGetList: false, //是否允许onlaod加载数据
				isAll: false,
				imageType:'goods'
			};
		},
		onLoad(option) {
			this.requestType = option.requestType
		},
		onShow() {
			if (!global.token) {
				navigateToLogin();
			}
			this.allowOnloadGetList = false;
			this.pagingListToggle();
		},
		computed: {
			listDataReverse() {
				this.listData.forEach(item => {
					item.selected = false
				})
				console.log(this.listData);
				return this.listData.reverse();
			}
		},
		methods: {
			selectAll() {
				this.isAll = !this.isAll;
				if (this.isAll) {
					this.listData.forEach(item => {
						item.selected = true
					})
				} else {
					this.listData.forEach(item => {
						item.selected = false
					})
				}
			},
			selectGoods(item) {
				item.selected = !item.selected
				this.isAll = this.listData.every(item => {
					return item.selected
				})
				this.$forceUpdate()
			},
			// 编辑商品
			editGoods(id) {
				uni.navigateTo({
					url: '/pages/tab/management/addGoods/index?id=' + id
				});
			},
			/**
			 * @event 改变tab
			 * @param {Number} data.id - 通过tab传过来的商品展示类型
			 */
			changeGoodsList(data) {
				this.requestType = data.id;
				this.pagingListToggle();
			},
			/**
			 * @description 混入传参钩子函数
			 * @param type 获取数据类型
			 */
			pagingListPostData() {
				console.log('状态改变', this.requestType);
				return {
					type: this.requestType
				};
			},
			/**
			 * @event 商品上架or下架状态改变
			 * @param {Objcet} item - 用户点击的商品
			 * @property {Number} data.id - 商品id
			 * @property {Number} saleStatus - 商品状态
			 */
			changeState(saleStatus) {
				const that = this
				let ids = []
				this.listData.map((item, index) => {
					if (item.selected) {
						ids.push(item.id)
					}
				})
				if (ids.length < 1) {
					that.$message.info('请选择商品');
					return
				}
				if (saleStatus == 'unSale') {
					this.$util.showModal({
						title: '提示',
						content: '确定下架商品吗？',
						confirmColor: that.$store.state.themeColor,
						success: function(res) {
							if (res.confirm) {
								that.$api
									.post(global.apiUrls.goodsPutaway, {
										id: ids.join(','),
										is_sale: 0
									})
									.then(res => {
										if (res.data.code == 1) {
											that.$message.info('操作成功');
											that.isAll = false
											that.pagingListToggle();
										}
									});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else if (saleStatus == 'sale') {
					this.$api
						.post(global.apiUrls.goodsPutaway, {
							id: ids.join(','),
							is_sale: 1
						})
						.then(res => {
							if (res.data.code == 1) {
								this.$message.info('操作成功');
								this.isAll = false
								this.pagingListToggle();
							}
						});
				}
			},
			/**
			 * @event 商品状态改变
			 * @param {Objcet} item - 用户点击的商品
			 * @property {Number} data.id - 商品id
			 */
			delGoods(item) {
				const that = this
				let ids = []
				this.listData.map((item, index) => {
					if (item.selected) {
						ids.push(item.id)
					}
				})
				if (ids.length < 1) {
					that.$message.info('请选择商品');
					return
				}
				this.$util.showModal({
					title: '提示',
					content: '确定删除商品',
					confirmColor: that.$store.state.themeColor,
					success: function(res) {
						if (res.confirm) {
							that.$api.post(global.apiUrls.delGoods, {
								id: ids.join(',')
							}).then(res => {
								if (res.data.code == 1) {
									that.$message.info('删除成功');
									that.isAll = false
									that.pagingListToggle();
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	// 上架
	.putaway {
		color: #ffffff !important;
		border: none !important;
		background: $bgtheme !important;
	}

	.page {
		width: 100%;
		// height: 100%;
	}

	.add-goods {
		color: #1A76F2;
	}

	.fu-goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		padding: 24rpx;

		.fu-goods-box {
			display: flex;
			flex-direction: column;
			position: relative;
			width: 49%;
			border-radius: 16rpx;
			overflow: hidden;
			background-color: #ffffff;

			.select {
				position: absolute;
				z-index: 10;
				top: 16rpx;
				right: 16rpx;
				width: 32rpx;
				height: 32rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.fu-goods-pic {
				width: 100%;
				height: 334rpx;

				.fu-pic {
					width: 100%;
					height: 100%;
				}
			}

			.fu-goods-name {
				padding: 16rpx;
				color: #000000;
				height: 112rpx;
			}

			.fu-goods-action {
				padding: 0 16rpx;

				.fu-goods-price {
					color: #FB2A25;
				}

				.fu-action-btn {
					width: 150rpx;
					height: 56rpx;
					line-height: 56rpx;
					border-radius: 8rpx;
					text-align: center;
					color: #333333;
					background-color: #F6F6F6;
				}

				.active {
					background-color: $bgtheme;
					color: #fff;
				}
			}
		}
	}

	.batch-view {
		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(var(--window-bottom));
		background-color: #FFFFFF;
		height: 100rpx;
		z-index: 999;

		.bt {
			background-color: #F6F6F6;
			width: 200rpx;
			height: 72rpx;
			color: #333333;
			border-radius: 36rpx;
			text-align: center;
			line-height: 72rpx;
			margin-right: 32rpx;
		}

		.active {
			background-color: $bgtheme;
			color: #FFFFFF;
		}

		.all {
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
</style>
